<template>
	<view class="y-flex y-flex-1">
		<search-input v-if="enableSearch" v-model="keyword" @confirm="handleConfirm" :marginGap="pageStyle.pageMarginGap"></search-input>
		<module-list ref="list"
		:component="components"
		:cell="cell"
		:bounce="pageStyle.enableBounce"
		:back-top-show="pageStyle.enableBackTop"
		:refreshImage="pageStyle.pulldownRefreshImage"
		:pulldownable="pageStyle.enablePulldown == 1"
		:loadmoreable="pageStyle.enableLoadmore == 1"
		:loadingColor="pageStyle.loadingColor"
		:backTopImage="pageStyle.backTopImage"
		:params="moduleParams"
		@pulldown="handlePulldown"
		@loaded="handleLoaded"
		@scroll="handleScroll">
		</module-list>
	</view>
</template>

<script>
	import ModuleList from './components/ModuleList.vue'
	import SearchInput from './components/SearchInput.vue'
	export default {
		inject: ['getPageStyle', 'getPage', 'getQuery'],
		computed: {
			page () {
				return this.getPage()
			},
			components () {
				return this.page?.components || []
			},
			cell () {
				return this.page?.cell || {}
			},
			pageStyle () {
				return this.getPageStyle()
			},
			query () {
				return this.getQuery()
			},
			//开启搜索
			enableSearch () {
				return this.pageStyle.enableSearch || false
			},
			//开启搜索后没有第一次进入页面是否主动加载一次数据（在没有keyword的情况下）
			enableSearchFirstLoad () {
				return this.pageStyle.enableSearchFirstLoad || false
			},
			moduleParams () {
				return Object.assign({}, this.query, {keyword: this.keyword})
			},
			//第一次加载是否加载选项栏以外的数据
			isFirstLoad () {
				return !this.enableSearch || (this.enableSearch && this.enableSearchFirstLoad) || this.keyword
			}
		},
		components:{
			ModuleList,
			SearchInput
		},
		data () {
			return {
				keyword: ''//搜索关键词
			}
		},
		mounted() {
			this.$nextTick(function () {
				this.refresh()
			})
		},
		methods: {
			refresh () {
				this.keyword = this.query.keyword || ''
				this.$nextTick(function () {
					if ( this.isFirstLoad ) this.handlePulldown()
					else this.handleLoaded()
				})
			},
			handleScroll (e) {
				this.$emit('scroll', Math.abs(e.contentOffset.y))
			},
			handleConfirm () {
				this.handlePulldown()
			},
			handlePulldown (callback) {
				this.$refs.list && this.$refs.list.initModule(callback, true)
			},
			handleLoaded () {
				this.$emit('loaded', true)
			}
		}
	}
</script>

<style>
</style>
